﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../layui/cropper/cropper.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <div class="layui-upload-list" style="margin:0">
                <img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
            </div>
        </div>
        <div class="layui-input-inline layui-btn-container" style="width: auto;">
            <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
        </div>
        <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
    </div>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/layui/lib/layui-v2.6.3/layui.js"></script>
    <link href="../layui/cropper/cropper.css" rel="stylesheet" />
    <script src="../layui/cropper/croppers.js"></script>
    <script src="~/layui/cropper/cropper.js"></script>
    <link href="~/layui/cropper/cropper.css" rel="stylesheet" />

    <script>
        layui.config({
            base: '/layui/cropper/' //layui自定义layui组件目录
        }).use(['form', 'croppers'], function () {
            var $ = layui.jquery
                , form = layui.form
                , croppers = layui.croppers
                , layer = layui.layer;

            //创建一个头像上传组件
            croppers.render({
                elem: '#editimg'
                , saveW: 150     //保存宽度
                , saveH: 150
                , mark: 1 / 1    //选取比例
                , area: '900px'  //弹窗宽度
                , url: "/home/UpLoadImg"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                , done: function (url) { //上传完毕回调
                    $("#inputimgurl").val(url);
                    $("#srcimgurl").attr('src', url);
                }
            });

        });
        /*!
* Cropper v3.0.0
*/

        layui.config({
            base: '/static/cropper/' //layui自定义layui组件目录
        }).define(['jquery', 'layer', 'cropper'], function (exports) {
            var $ = layui.jquery
                , layer = layui.layer;
            var html = "<link rel=\"stylesheet\" href=\"/static/cropper/cropper.css\">\n" +
                "<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
                "    <div class=\"layui-form-item\">\n" +
                "        <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">\n" +
                "            <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" +
                "                <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
                "            </label>\n" +
                "            <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
                "        </div>\n" +
                "        <div class=\"layui-form-mid layui-word-aux\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
                "    </div>\n" +
                "    <div class=\"layui-row layui-col-space15\">\n" +
                "        <div class=\"layui-col-xs9\">\n" +
                "            <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
                "                <img src=\"\" >\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"layui-col-xs3\">\n" +
                "            <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
                "            </div>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "    <div class=\"layui-row layui-col-space15\">\n" +
                "        <div class=\"layui-col-xs9\">\n" +
                "            <div class=\"layui-row\">\n" +
                "                <div class=\"layui-col-xs6\">\n" +
                "                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
                "                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
                "                </div>\n" +
                "                <div class=\"layui-col-xs5\" style=\"text-align: right;\">\n" +
                "                    <button type=\"button\" class=\"layui-btn\" title=\"移动\"></button>\n" +
                "                    <button type=\"button\" class=\"layui-btn\" title=\"放大图片\"></button>\n" +
                "                    <button type=\"button\" class=\"layui-btn\" title=\"缩小图片\"></button>\n" +
                "                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置图片\"></button>\n" +
                "                </div>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"layui-col-xs3\">\n" +
                "            <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "\n" +
                "</div>";
            var obj = {
                render: function (e) {
                    $('body').append(html);
                    var self = this,
                        elem = e.elem,
                        saveW = e.saveW,
                        saveH = e.saveH,
                        mark = e.mark,
                        area = e.area,
                        url = e.url,
                        done = e.done;

                    var content = $('.showImgEdit')
                        , image = $(".showImgEdit .readyimg img")
                        , preview = '.showImgEdit .img-preview'
                        , file = $(".showImgEdit input[name='file']")
                        , options = { aspectRatio: mark, preview: preview, viewMode: 1 };

                    $(elem).on('click', function () {
                        layer.open({
                            type: 1
                            , content: content
                            , area: area
                            , success: function () {
                                image.cropper(options);
                            }
                            , cancel: function (index) {
                                layer.close(index);
                                image.cropper('destroy');
                            }
                        });
                    });
                    $(".layui-btn").on('click', function () {
                        var event = $(this).attr("cropper-event");
                        //监听确认保存图像
                        if (event === 'confirmSave') {
                            image.cropper("getCroppedCanvas", {
                                width: saveW,
                                height: saveH
                            }).toBlob(function (blob) {
                                var formData = new FormData();
                                formData.append('file', blob, 'head.jpg');
                                $.ajax({
                                    method: "post",
                                    url: url, //用于文件上传的服务器端请求地址
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success: function (result) {
                                        if (result.code == 0) {
                                            layer.msg(result.msg, { icon: 1 });
                                            layer.closeAll('page');
                                            return done(result.data.src);
                                        } else if (result.code == -1) {
                                            layer.alert(result.msg, { icon: 2 });
                                        }

                                    }
                                });
                            });
                            //监听旋转
                        } else if (event === 'rotate') {
                            var option = $(this).attr('data-option');
                            image.cropper('rotate', option);
                            //重设图片
                        } else if (event === 'reset') {
                            image.cropper('reset');
                        }
                        //文件选择
                        file.change(function () {
                            var r = new FileReader();
                            var f = this.files[0];
                            r.readAsDataURL(f);
                            r.onload = function (e) {
                                image.cropper('destroy').attr('src', this.result).cropper(options);
                            };
                        });
                    });
                }

            };
            exports('croppers', obj);
        });
    </script>
</body>
</html>